<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>全景图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
      body,
      html,
      #container {
          overflow: hidden;
          width: 100%;
          height: 100%;
          margin: 0;
          font-family: "微软雅黑",serif;
      }
      .info {
          z-index: 999;
          width: auto;
          min-width: 22rem;
          padding: .75rem 1.25rem;
          margin-left: 1.25rem;
          position: fixed;
          top: 1rem;
          background-color: #fff;
          border-radius: .25rem;
          font-size: 14px;
          color: #666;
          box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
      }
      /*.map-site {*/
      /*    width: 50px;*/
      /*    height: 50px;*/
      /*    background-color: blue;*/
      /*    position: absolute;*/
      /*    top: 100px;*/
      /*    left: 100px;*/
      /*    cursor: pointer;*/
      /*}*/
      /*#siteForm {*/
      /*    display: none;*/
      /*    position: absolute;*/
      /*    top: 150px;*/
      /*    left: 150px;*/
      /*    background-color: white;*/
      /*    padding: 20px;*/
      /*    border: 1px solid black;*/
      /*    z-index: 1;*/
      /*}*/
  </style>
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=VqxfInj74vyrLyd1UURnewqcJpS7J3r5"></script>
<!--    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=VqxfInj74vyrLyd1UURnewqcJpS7J3r5"></script>-->
  <div class="search_map">
    <img style="width: 80px;height: 80px;margin-top: -40px;" src="./images/img.png" alt="搜索" (click)="switchTab(1)" tooltip="搜索" placement="right" containerClass="Bmap_tooltipClass">
    <input type="text" id="suggestId" size="20" [hidden]="!searchShow"  placeholder="请输入搜索关键词" style="margin-top: -40px;"
           (keyup.enter)="inputSearch($event)" [(ngModel)]="searchContent" />
    <div class="close_search" [hidden]="!searchShow" (click)="searchShow=false"></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  </div>

</head>
<body>
<!--<div class="map-site" onclick="showForm()">站点</div>-->

<!--<form id="siteForm">-->
<!--    <label for="siteName">站点名称:</label><br>-->
<!--    <input type="text" id="siteName" name="siteName"><br>-->
<!--    <label for="siteDesc">站点描述:</label><br>-->
<!--    <textarea id="siteDesc" name="siteDesc"></textarea><br>-->
<!--    <button type="button" id="onset" onclick="function hideForm() {-->
<!--        //在地图上点击这个按钮按表单消失-->
<!--        document.getElementById('siteForm').style.display = 'none';-->

<!--    }-->
<!--    hideForm()">关闭</button>-->
<!--</form>-->
<div id="container"></div>


</body>
</html>
<script>
    // function showForm() {
    //     document.getElementById('siteForm').style.display = 'block';
    //
    // }
    // function showForm() {
    //     // // 获取表单值
    //     // var siteName = document.getElementById('siteName').value;
    //     // var siteDesc = document.getElementById('siteDesc').value;
    //     //
    //     // // 在控制台打印值，实际应用中你可以发送到服务器或做其他处理
    //     // console.log("站点名称:", siteName);
    //     // console.log("站点描述:", siteDesc);
    //     //
    //     // // 清空表单（可选）
    //     // document.getElementById('siteName').value = '';
    //     // document.getElementById('siteDesc').value = '';
    //     //
    //     // // 隐藏表单
    //     // hideForm();
    // }

    // function hideForm() {
    // document.getElementById('siteForm').style.display = 'none';
    // }

  // import * as mapvthree from 'mapv-three';
  /* global BMapGL */
  var map = new BMapGL.Map('container', {
    maxZoom: 21,
  });
  var point = new BMapGL.Point(115.403850, 38.913795);
  map.centerAndZoom(point, 10);
  map.enableScrollWheelZoom();

  // 添加全景图层
  map.addTileLayer(new BMapGL.PanoramaCoverageLayer());

  // 添加全景控件
  var stCtrl = new BMapGL.PanoramaControl();
  stCtrl.setOffset(new BMapGL.Size(0, 0));
  map.addControl(stCtrl);
  // 比例尺
  var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
  map.addControl(scaleCtrl);
  map.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11);
  map.enableScrollWheelZoom(true);

  var bd = new BMapGL.Boundary();
  bd.get('保定', function (rs) {
    var hole = new BMapGL.Polygon(rs.boundaries, {
      fillColor: 'blue',
      fillOpacity: 0.2
    });

    map.addOverlay(hole);})



  // $(function () {

  // })
  map.addEventListener('click', function(e) {
      alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat)
      //弹出之后关闭地图小手
      // map.enableScrollWheelZoom(false);
      // showForm()
  });

  // 实时定位

  map.centerAndZoom(point,12);

  var geolocation = new BMapGL.Geolocation();
  geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
      var mk = new BMapGL.Marker(r.point);
      map.addOverlay(mk);
      map.panTo(r.point);
      alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    }else {
      alert('failed' + this.getStatus());
    }
    point= new BMapGL.Point( r.point.lng , r.point.lat);

  });



// 设置多个固定站点
  var marker1 = new BMapGL.Marker(new BMapGL.Point(115.813850, 39.113795));
  marker1.setLabel(new BMapGL.Label('站点1', {offset: new BMapGL.Size(20, -10)}));
  var marker2= new BMapGL.Marker(new BMapGL.Point(115.803850, 115.803850));
  marker2.setLabel(new BMapGL.Label('站点2', {offset: new BMapGL.Size(20, -10)}));
  var marker3 = new BMapGL.Marker(new BMapGL.Point(115.49193655563614,38.821293041507694));
  marker3.setLabel(new BMapGL.Label('站点3', {offset: new BMapGL.Size(20, -10)}));
  var marker4 = new BMapGL.Marker(new BMapGL.Point(115.603850, 38.613795));
  marker4.setLabel(new BMapGL.Label('站点0', {offset: new BMapGL.Size(20, -10)}));
   map.addOverlay(marker1);
   map.addOverlay(marker2);
   map.addOverlay(marker3);
  map.addOverlay(marker4);

// 鼠标悬停规划从我的位置到站点的导航路线
  marker1.addEventListener('mouseover', function () {
    var driving = new BMapGL.DrivingRoute(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      }
    });
    driving.search(point, marker1.getPosition());
  });
  marker2.addEventListener('mouseover', function () {
    var driving = new BMapGL.DrivingRoute(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      }
    });
    driving.search(point, marker2.getPosition());
  });
  marker3.addEventListener('mouseover', function () {
    var driving = new BMapGL.DrivingRoute(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      }
    });
    driving.search(point, marker3.getPosition());
  });

  marker4.addEventListener('mouseover', function () {
    var driving = new BMapGL.DrivingRoute(map, {
      renderOptions: {
        map: map,
        autoViewport: true
      }
    });
    driving.search(point, marker4.getPosition());
  });


  // 通过浏览器定位获得我的经纬度
  const getMyPoint = () => {
    // var self = this
    var geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition(function (res) {
      console.log(geolocation, '位置信息')
      pointA.value = new BMap.Point(res.point.lng, res.point.lat) // 通过浏览器获得我的经纬度
      console.log(pointA.value)
    })
  }
// 地图显示我的定位距离某个站点之间的距离
  var pointA = new BMap.Point(115.813850, 39.113795);
  var pointB = new BMap.Point(115.803850, 39.013795);
  var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}});
  driving.search(pointA, pointB);
</script>
